﻿<!doctype html>
<html>
	<!-- InstanceBegin template="/Templates/template1.dwt" codeOutsideHTMLIsLocked="false" -->
	<head>
		<meta charset="utf-8">
		<!-- InstanceBeginEditable name="doctitle" -->
		<title>微信互动</title>
		<!-- InstanceEndEditable -->
		<script type="text/javascript" src="../js/common.js"></script>
		<link href="../css/Pager.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../js/jquery.pager.js"></script>
		<script type="text/javascript" src="../js/ac_quicktime.js"></script>
		<script type="text/javascript" src="../js/amrAudioPlayer.js"></script>
		<script type="text/javascript" src="../js/utils.js"></script>
		<script type="text/javascript" src="../js/checkLogin.js"></script>
		<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
		<link href="../css/validator3.css" type="text/css" rel="stylesheet" />
		<link href="../css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../js/doubleDate2.0.js"></script>
		<link href="shadowbox/shadowbox.css" rel="stylesheet" />
		<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
		<script type="text/javascript" src="../js/pagination.js"></script>
		<script type="text/javascript" src="../js/find.js"></script>
		<script type="text/javascript" src="../js/messageReplySelecter.js"></script>
		<script type="text/javascript">
			/*全局状态变量*/
			var _flag = 0;
			//标识当前是更新还是添加，0标示添加，1标示更新
			$(function() {
				$('.doubledate').kuiDate({
					className : 'doubledate',
					isDisabled : "0" // isDisabled为可选参数，“0”表示今日之前不可选，“1”标志今日之前可选
				});

				$.get('../channel/find/list', function(message) {

					$("#channel").empty();

					if (IsEmpty(message)) {
						alert('没有查询到数据');
						return;
					}

					if (message.state === 0) {
						if (message.result.len == 1) {
							var channelName = getHeadIndexValue(0, message, 'channelName');
							var channelId = getHeadIndexValue(0, message, 'channelId');
							$("#channel").append("<option selected='selected' value='" + channelId + "'>" + channelName + "</option>");
							$("#channel").attr('disabled', 'disabled');
						} else {
							$("#channel").append("<option>选择频道</option>");
							for (var i = 0; i < message.result.len; i++) {
								var channelName = getHeadIndexValue(i, message, 'channelName');
								var channelId = getHeadIndexValue(i, message, 'channelId');
								$("#channel").append("<option value='" + channelId + "'>" + channelName + "</option>");
							}
						}
					} else if (message.state == 1) {
						art.dialog({
							fixed : true,
							lock : true,
							content : message.msg,
							icon : 'error',
							ok : true
						});
					} else {
						checkStateShowErrorMsgAndDealResult(JSON.stringify(message));
					}
				}, 'json');

				//初始化 日期选择框
				initImage();
				var startDate = $('#dtBegin').val(getToday());
				var endDate = $('#dtEnd').val(getToday());
			});

			//初始化图片查看组件
			function initImage() {
				Shadowbox.init();
				window.openImage = function(url) {
					Shadowbox.open({
						content : url,
						player : 'img'
					});
				};
			}

			//返回今天的日期 yyyy-MM-dd 格式
			function getToday() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth();
				m = parseInt(m) + 1;
				m = m >= 10 ? m : '0' + m;
				var d = date.getDate();
				d = d >= 10 ? d : '0' + d;
				return y + '-' + m + '-' + d;
			}

			function search() {
				var channelId = $('#channel').val();
				var startDate = $('#dtBegin').val();
				var endDate = $('#dtEnd').val();
				var openName = $('#openName').val();
				new Pagination({
					method : 'get', // 请求方法 post|get
					type : 'json', //返回内容格式，json|text	//NOT SUPPORT
					data : {
						'channelId' : channelId,
						'startDate' : startDate,
						'endDate' : endDate,
						'openName' : openName
					},
					url : '../WxCustomerReplayMsg/find/list', // 请求地址，注意函数会自定添加分页的两个参数 ‘0/10’
					pageSize : 10, // 页面大小
					startIndex : 0, //服务器提供的接口页码是从几开始的，建议从0开始
					success : printDataToPage, // state 为  0 时，回调
					pagerHandler : 'pager' // 显示分页的 div 的 id
				});
				//var channelId = $('#channel').val('');
				//var startDate = $('#dtBegin').val('');
				//var endDate = $('#dtEnd').val('');
				//var openName = $('#openName').val('');
			}

			function printDataToPage(message) {
				$("#tbody").empty();
				var len = message.result.len;
				for (var i = 0; i < message.result.data.length; i++) {
					var id = getHeadIndexValue(i, message, 'id');
					var channelName = getHtmlString(getHeadIndexValue(i, message, 'channelName'));
					var creatTime = getHtmlString(getHeadIndexValue(i, message, 'creatTime'));
					var openName = getHtmlString(getHeadIndexValue(i, message, 'openName'));
					var content = getHtmlString(getHeadIndexValue(i, message, 'content'));
					var imageMId = getHtmlString(getHeadIndexValue(i, message, 'imageMId'));
					var imageUrl = getHtmlString(getHeadIndexValue(i, message, 'imageUrl'));
					var voiceMId = getHtmlString(getHeadIndexValue(i, message, 'voiceMId'));
					var voiceUrl = getHtmlString(getHeadIndexValue(i, message, 'voiceUrl'));
					var location_x = getHtmlString(getHeadIndexValue(i, message, 'location_x'));
					var location_y = getHtmlString(getHeadIndexValue(i, message, 'location_y'));
					var customerName = getHtmlString(getHeadIndexValue(i, message, 'customerName'));
					var mp = getHtmlString(getHeadIndexValue(i, message, 'mp'));
					var tel = getHtmlString(getHeadIndexValue(i, message, 'tel'));
					var levelName = getHtmlString(getHeadIndexValue(i, message, 'levelName'));
					var musicEvent = '';
					if (IsNotEmpty(voiceUrl)) {
						var musicEvent = "<a id='amr" + i + "' href='javascript:void(0)' onclick=amrAudioPlay('" + voiceUrl + "','amr" + i + "')><font style='text-decoration:underline; color: green;'>播放</font></a>";
					}
					var imageTd = '';
					if (IsNotEmpty(imageUrl)) {
						imageTd = "<a href='javascript:void(0)' style='text-decoration:underline; color: green;' onclick=openImage('" + imageUrl + "')>查看</a>";
					}
					var $tr = $("<tr><td>" + channelName + "</td>" + "<td>" + creatTime + "</td>" + "<td>" + getHtmlString(openName) + "</td>" + "<td>" + content + "</td>" + "<td>" + musicEvent + "</td><td>" + imageTd + "</td>" + "<td>" + getHtmlString(customerName) + "</td>" + "<td>" + mp + "</td>" + "<td>" + (levelName) + "</td><td><a href='javascript:void(0)' onclick=\"openReplyWindow('" + id + "')\">回复</a></td></tr>");
					$("#tbody").append($tr);
				}

				$("#sup").text('  共 ' + len + ' 条');
			}

			var _id = null;
			function openReplyWindow(id) {
				_id = id;
				$("#replyContent").val('');
				$("#replyImage").val('');
								
				$("#yinying1,#replyWindow").show();
				addMargin($("#replyWindow"));
			}

			function closeReplyWindow() {
				$("#yinying1,#replyWindow").hide();
			}

			function reply() {
				$("#yinying1,#replyWindow").hide();
				var content = $("#replyContent").val();
				$.ajaxFileUpload({
					url : "../WxCustomerReplayMsg/replay",
					secureuri : false,
					data : {
						id : _id,
						content : content
					},
					fileElementId : "replyImage",
					dataType : "json",
					type : "post",
					success : function(message, status) {
						if (IsEmpty(message)) {
							art.dialog({
								fixed : true,
								lock : true,
								content : '没有查询到数据',
								icon : 'error',
								ok : true
							});
							return;
						}
						if (message.state === 0) {
							art.dialog({
								fixed : true,
								lock : true,
								content : '回复成功！',
								icon : 'succeed',
								ok : true
							});
						} else if (message.state === 1) {
							art.dialog({
								fixed : true,
								lock : true,
								content : message.msg,
								icon : 'warning',
								ok : true
							});
						} else {
							checkStateShowErrorMsgAndDealResult(JSON.stringify(message));
						}
					}
				});
			}

			var _autoQueryInterval = null;
			/**
			 * 开始自动查询
			 */
			function startAutoQuery() {
				if (_autoQueryInterval !== null) {
					$("#autoQuery").val('自动刷新');
					clearInterval(_autoQueryInterval);
					_autoQueryInterval = null;
					return;
				}
				search();
				$("#autoQuery").val('停止');
				_autoQueryInterval = setInterval(function() {
					search();
				}, 1500);
			}
			
			function showReply(){
				openMessageReplyListPanel(_id)
			}

		</script>
	</head>
	<body>
		<!-- 用来播放音乐，不会影响页面布局 -->
		<div id="jquery_jplayer"></div>
		<div id="yinying"></div>
		<!-- InstanceBeginEditable name="EditRegion3" -->
		<div class="container" id="container">
			<div class="container_R fr">
				<div class="place">
					微信互动
				</div>
				<div class="member_search">
					<p>
						<label><span>频道：</span> <select id="channel"></select> </label><span>起始日期：</span>
						<input type="text" readonly class="doubledate ipticon" id="dtBegin" />
						<span>截止时间：</span>
						<input type="text" readonly
						class="doubledate ipticon" id="dtEnd" />
					</p>
					<p>
						<span>昵称：</span>
						<input type="text" id="openName" class="absoluteTxt">
						<input type="button" value="查询" class="btn" onclick="search()">
						<input type="button" id="autoQuery" value="自动刷新" class="btn" onclick="startAutoQuery()">
					</p>
				</div>
				<table width="100%" class="member_list" cellpadding="0"
				cellspacing="1" border="0" id="memberList">
					<caption>
						<strong>消息列表<span id="sup"></span> </strong>
					</caption>
					<thead>
						<tr>
							<th>频道</th>
							<th>时间</th>
							<th>昵称</th>
							<th>内容</th>
							<th>语音</th>
							<th>图片</th>
							<!-- <th>位置</th> -->
							<th>姓名</th>
							<th>电话/手机</th>
							<th>会员级别</th>
							<th>回复</th>
						</tr>
					</thead>
					<tbody id="tbody"></tbody>
				</table>
				<div id="pager" style="float: right;"></div>
			</div>
			<div class="fc"></div>
		</div>

		<!-- 弹出层，回复消息使用 -->
		<div id="yinying1"></div>
		<div id="replyWindow" class="hideDiv">
			<div class="closeTop">
				<span id="closeThe"><img onclick="closeReplyWindow()" src="../images/close.png"></span>
			</div>
			<div>
				<p>
					<label><input type="button"  onclick="showReply()" value="查看回复记录"> </label>
				</p>
				<p>
					<label>文字：</label>
					<br />
					<textarea id="replyContent" style="width: 60%; height: 150px;"></textarea>
				</p>
				<p>
					<label>图片：</label>
					<input type="file" id="replyImage" name="replyImage" />
				</p>
				<p>
					<button onclick="reply();">
						回复
					</button>
				</p>
			</div>
		</div>
		<!-- InstanceEndEditable -->
		<script type="text/javascript" src="../js/header.js"></script>
		<script type="text/javascript" src="../js/left.js"></script>
		<script type="text/javascript" src="../js/footer.js"></script>
		<script type="text/javascript">
			showTab(5, 1);
		</script>
	</body>
	<!-- InstanceEnd -->
</html>

